<template>
  <div>
    <div class="MapBox" :class="newClass==true?'newMapBox':''">
      <!-- 地址搜索 -->
      <!-- <el-autocomplete
        class="inline-input"
        v-model="address"
        :fetch-suggestions="querySearch"
        placeholder="请输入内容"
        :trigger-on-focus="false"
        @select="handleSelect"
      >
        <template #default="{ item }">
          <div class="suggestions-name">
            <span>{{ item.name }}</span>
          </div>
          <div class="suggestions-address">
            {{ item.address }}
          </div>
        </template>
      </el-autocomplete>
      <div class="newappend-box" @click="mapclick">
        <div>选择地址</div>
        <div class="append-img weizhi"></div>
      </div> -->
      <el-input
        placeholder="请输入地址"
        v-model="address"
        @input="handleInputChange"
      >
        <template slot="append">
          <div class="append-box" @click="mapclick">
            <div>选择经纬度</div>
            <div class="append-img"></div>
          </div>
        </template>
      </el-input>
      <div class="jingweidu" v-if="jingweidu.longitude&&jingweidu.latitude">
        <span>经度：{{ jingweidu.longitude.toFixed(12) }}</span
        ><span>纬度：{{ jingweidu.latitude.toFixed(12) }}</span>
      </div>
    </div>
    <egisMap
      :position="newCurrentPosition"
      :isMapDialogVisible="isMapDialogVisible"
      @getMapxq="getMapxq"
      :class="mapxianshi == true ? '' : 'yichu'"
    ></egisMap>
  </div>
</template>
<script>
import egisMap from './index.vue'
import useService from './common/useService'
const { searchKeyword, regeocode } = useService()
export default {
  name: 'NewMap',
  props: ['Newaddress','newClass'],
  components: { egisMap },
  data() {
    return {
      jingweidu: {},
      mapxianshi: false,
      address: '',
      restaurants: [],
      newCurrentPosition: {
        latitude: '',
        longitude: '',
        address: ''
      },
      isMapDialogVisible: false
    }
  },
  watch: {
    Newaddress: {
      immediate: true,
      deep: true,
      handler(newVal) {
        console.log('newVal', newVal)
        this.address = newVal.address
        this.jingweidu.longitude = newVal?.longitude||newVal.coordinateX
        this.jingweidu.latitude = newVal?.latitude|| newVal.coordinateY
      }
    }
  },
  mounted() {},
  methods: {
    handleInputChange() {
      console.log(this.address)
      this.$emit('getAddress', this.address)
    },
    getMapxq(e) {
      if (e == '') {
         this.mapxianshi = false
      } else {
        console.log(e)
        this.mapxianshi = false
        let currentPosition = {
          latitude: e.location.y,
          longitude: e.location.x,
          // address: e.formatted_address
        }
        this.address = e.formatted_address
        this.jingweidu = currentPosition
        this.$emit('childByValue', currentPosition)
      }
    },
    mapclick() {
      this.mapxianshi = true
    },
    querySearch(value, cb) {
      console.log(value)
      let timer = null
      if (value) {
        clearTimeout(timer)
        timer = setTimeout(() => {
          searchKeyword(value).then(res => {
            console.log('res', res)
            this.restaurants = res.pois || []
            cb(res.pois || [])
          })
        }, 300)
      } else {
        this.restaurants = []
        cb([])
      }
    },

    // 地址选择
    handleSelect(data) {
      console.log('select', data)
      let currentPosition = {
        latitude: data.location.y,
        longitude: data.location.x,
        address: data.address
      }
      // 获取详细地址
      regeocode({ lat: data.location.y, lng: data.location.x }).then(res => {
        // 详细地址
        currentPosition.cityName = res.address_component.city
        currentPosition.regionName = res.address_component.district
        currentPosition.regionCode = res.address_component.adcode
        // mapSubmit(currentPosition)
      })
      // this.address = data.address
      console.log(currentPosition)
      this.newCurrentPosition = currentPosition
      this.$emit('childByValue', currentPosition)
    }
  }
}
</script>
<style lang="scss" scoped>
.newappend-box {
  width: 114px;
  height: 100%;
  background: rgba(124, 173, 216, 0.2);
  border-radius: 0px 4px 4px 0px;
  border: 1px solid #7cadd8;
  position: relative;
  left: -2px;
  z-index: 20;
  cursor: pointer;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.append-img {
  width: 14px;
  height: 14px;
  margin-left: 10px;
  background: url('~@/assets/TeamAdministrator/inputNautica.png') no-repeat;
}

.MapBox {
  height: 42px;
  // display: flex;
  // justify-content: center;
  // // align-items: center;
  // height: 30px;
  // line-height: 30px;
  text-align: left;
}
.mapBtn {
  width: 114px;
  height: 100%;
  background: rgba(124, 173, 216, 0.2);
  border-radius: 0px 4px 4px 0px;
  border: 1px solid #7cadd8;
  position: relative;
  left: -2px;
  z-index: 20;
}
.el-autocomplete-suggestion {
  border: none;
}
.el-scrollbar {
  font-size: 12px;
  background: rgba(6, 50, 88, 0.9);
  .el-dropdown-menu__item:not(.is-disabled):focus {
    background-color: rgba(0, 160, 255, 0.2);
  }
  .el-scrollbar__view {
    font-size: 12px;
    .suggestions-name {
      font-size: 12px;
      color: #cbe7ff;
      line-height: normal;
    }
    li {
      height: 34px;
      line-height: 34px;
    }
    .suggestions-address {
      font-size: 12px;
      line-height: normal;
      color: #999;
    }
    li:hover {
      background: rgba(0, 160, 255, 0.2) !important;
      .suggestions-name {
        color: #4af6fc;
      }
      .suggestions-address {
        color: #cbe7ff;
      }
    }
  }
}
.el-input {
}
.el-popper {
  overflow: auto;
}
.yichu {
  visibility: hidden;
}
.jingweidu {
  display: flex;
  justify-content: space-between;
  height: 21px;
  font-size: 12px;
  font-family: MicrosoftYaHei;
  color: #ffffff;
  line-height: 3px;
}
.append-box {
  // width: 114px;
  height: 30px;
  // background: rgba(124, 173, 216, 0.2);
  // border-radius: 0px 4px 4px 0px;
  // border: 1px solid #7cadd8;
  position: relative;
  left: -2px;
  z-index: 20;
  cursor: pointer;
  font-size: 16px;
  font-family: MicrosoftYaHei;
  color: #ffffff;
  display: flex;
  justify-content: center;
  align-items: center;
}
.newMapBox{
  width: 451px;
}
</style>
